import React, { Component } from 'react'
import request from "./utils/request"
import {Tabs} from "antd"
const { TabPane } = Tabs;
export class App extends Component {
  state={
    list:[],
    listChildren:[]
  }
  callback(key) {
    console.log(key);
    //修改listChildren数据
    //1.先拷贝state下的数据
    //2.写你要对数据的操作
    //3.赋值
    let list = this.state.list
    let data = list[key].child
    this.setState({listChildren:data})
    
  }
  componentDidMount(){
    request.get("/list").then(res=>{
      this.setState({list:res.data,listChildren:res.data[0].child})
      
    })
    
  }
  render() {
    let {list,listChildren} = this.state
    return (
      <div>
        app
        <Tabs tabPosition={"left"} defaultActiveKey="1" onChange={this.callback.bind(this)}>
          {
            list.map((item,index)=>{
              return  <TabPane tab={item.name} key={index}>
                      {
                        listChildren.map((item,i)=>{
                          return <div key={i}>
                            <p>name:{item.name}</p>
                            <p><img src={item.img} alt="" /></p>
                          </div>
                        })
                      }
                </TabPane>
            })
          }
      </Tabs>
      </div>
    )
  }
}

export default App


